<template>

    <div>

        <h2></h2>

        <div class="container">
            <div style="margin-bottom: 20px;">
                <el-button type="default" @click="handleAdd">添加应用</el-button>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column width="80"
                        prop="id"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        >
                </el-table-column>
                <el-table-column
                        prop="app_name"
                        label="应用"
                        >
                </el-table-column>
                <el-table-column
                        prop="channel"
                        label="渠道"
                        >
                </el-table-column>
                <el-table-column
                        prop="current_version"
                        label="当前版本"
                        >
                </el-table-column>
                <el-table-column
                        prop="update_to_version"
                        label="目标版本"
                        >
                </el-table-column>
                <el-table-column  width="100"
                        label="是否更新"
                >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.is_update"
                                active-color="#13ce66"
                                inactive-color="#999"
                                :active-value="1"
                                :inactive-value="0" @change="handleSwitch(scope.row.id,'is_update',scope.row.is_update)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column  width="100"
                        label="强制更新"
                >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.force_update"
                                active-color="#13ce66"
                                inactive-color="#999"
                                :active-value="1"
                                :inactive-value="0" @change="handleSwitch(scope.row.id,'force_update',scope.row.force_update)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column width="200"
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <el-dialog title="表单" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="160px">
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="应用">
                    <el-input v-model="form.app_name"></el-input>
                </el-form-item>
                <el-form-item label="渠道">
                    <el-input v-model="form.channel"></el-input>
                </el-form-item>
                <el-form-item label="当前版本">
                    <el-input v-model="form.current_version"></el-input>
                </el-form-item>
                <el-form-item label="更新的目标版本">
                    <el-input v-model="form.update_to_version"></el-input>
                </el-form-item>
                <el-form-item label="下载地址">
                    <el-input v-model="form.download_url"></el-input>
                </el-form-item>
                <el-form-item label="是否开启微信登录">
                    <el-switch
                            v-model="form.open_weixin_login"
                            active-color="#13ce66"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="是否提示更新">
                    <el-switch
                            v-model="form.is_update"
                            active-color="#13ce66"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="是否强制更新">
                    <el-switch
                            v-model="form.force_update"
                            active-color="#13ce66"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="更新提示语">
                    <el-input v-model="form.update_words"></el-input>
                </el-form-item>

            </el-form>
            <div style="text-align: center">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>
    export default {
      data() {
        return {
          items: [],
          loading: true,
          params: {
            limit: 10,
            offset: 0
          },
          currentPage: 1,
          total: 0,
          form:{
          },
          dialogVisible: false
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/app/control', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              this.total = res.data.data.total;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        handleSwitch(id,field,val){
            axios.post('/admin/api/app/control/fast_update',{'id':id,'field':field,'value':val}).then((res) => {
                if (res.data.code === 0) {
                  this.fetch();
                } else {
                  this.$message(res.data.msg);
                }
                this.loading = false;
              }).catch((err) => {
                this.$message('系统错误');
                this.loading = false;
              })
        },

        handleAdd(){
            this.dialogVisible = true;
            this.form = {};
        },

        handleEdit(item) {
           this.dialogVisible = true;
           this.form = Object.assign({}, item);
        },

        handleDelete(item) {
            this.$confirm('确定要删除吗？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
              })
            .then(() => {
                this.destroy(item.id);
            })
            .catch(action => {

            });
        },

        save() {
          if (this.form.id !== undefined) {
            this.update();
          } else {
            this.store();
          }
        },

        store() {
          axios.post('/admin/api/app/control/add', this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        update() {
          axios.post('/admin/api/app/control/update', this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        destroy(id) {
          axios.post('/admin/api/app/control/delete',{id:id}).then((res) => {
            if (res.data.code === 0) {
              this.fetch();
              this.$message.success('删除成功');
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          });

        },

        // 切换分页
        setPage: function(page) {
          this.currentPage = page;
          this.params.offset = (page - 1) * this.params.limit;
          this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        }
      }
    }
</script>